<!-- This document provide the code for 2 modals related to the menu: i/ the modal showing all chart types ii/ the search bar utility -->

<!-- Modal menu: one icon per chart type with black background -->
<div
  class="portfolio-modal modal fade"
  id="LogoMenu"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
  style="background-color: black"
>
  <div
    class="modal-dialog h-100 modal-dialog-centered"
    style="width: 80%; max-width: 917px"
  >
    <div class="modal-content">
      <div
        class="close-modal"
        data-dismiss="modal"
        style="background-color: black"
      >
        <a href=""
          ><p style="color: white; text-align: right; font-size: 23px">
            &#10005;
          </p></a
        >
      </div>
      <div class="container" style="background-color: black">
        <div class="row">
          <div class="modal-body">
            <a href="../violin.html">
              <img
                class="img-fluid imageOfMenu imageOfMenu"
                src="../img/section/Violin150.png"
                alt=""
              /> </a
            ><a href="../density.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Density150.png"
                alt=""
              /> </a
            ><a href="../histogram.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Histogram150.png"
                alt=""
              /> </a
            ><a href="../boxplot.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Box1150.png"
                alt=""
              /> </a
            ><a href="../ridgeline.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Joyplot150.png"
                alt=""
              />
            </a>

            <a href="../scatter.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/ScatterPlot150.png"
                alt=""
              /> </a
            ><a href="../heatmap">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Heatmap150.png"
                alt=""
              /> </a
            ><a href="../correlogram.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Correlogram150.png"
                alt=""
              /> </a
            ><a href="../bubble.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/BubblePlot150.png"
                alt=""
              /> </a
            ><a href="../connectedscatter.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/ScatterConnected150.png"
                alt=""
              /> </a
            ><a href="../density2d.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/2dDensity150.png"
                alt=""
              />
            </a>

            <a href="../barplot.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Bar150.png"
                alt=""
              /> </a
            ><a href="../spider.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Spider150.png"
                alt=""
              /> </a
            ><a href="../wordcloud.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Wordcloud150.png"
                alt=""
              /> </a
            ><a href="../parallel.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Parallel1150.png"
                alt=""
              /> </a
            ><a href="../lollipop.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Lollipop150.png"
                alt=""
              /> </a
            ><a href="../circular_barplot.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/CircularBarplot150.png"
                alt=""
              />
            </a>

            <a href="../treemap.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Tree150.png"
                alt=""
              /> </a
            ><a href="../donut.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Doughnut150.png"
                alt=""
              /> </a
            ><a href="../pie.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Pie150.png"
                alt=""
              /> </a
            ><a href="../dendrogram.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Dendrogram150.png"
                alt=""
              /> </a
            ><a href="../circularpacking.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/CircularPacking150.png"
                alt=""
              /> </a
            ><a href="../sunburst.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Sunburst150.png"
                alt=""
              />
            </a>

            <a href="../line.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Line150.png"
                alt=""
              /> </a
            ><a href="../area.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Area150.png"
                alt=""
              /> </a
            ><a href="../stackedarea.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/StackedArea150.png"
                alt=""
              /> </a
            ><a href="../streamgraph.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Stream150.png"
                alt=""
              />
            </a>

            <a href="../backgroundmap.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Map150.png"
                alt=""
              /> </a
            ><a href="../choropleth.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Choropleth150.png"
                alt=""
              /> </a
            ><a href="../hexbinmap.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/MapHexbin150.png"
                alt=""
              /> </a
            ><a href="../cartogram.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Cartogram150.png"
                alt=""
              /> </a
            ><a href="../connection.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/ConnectedMap150.png"
                alt=""
              /> </a
            ><a href="../bubblemap.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/BubbleMap150.png"
                alt=""
              />
            </a>

            <a href="../chord.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Chord150.png"
                alt=""
              /> </a
            ><a href="../network.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Network150.png"
                alt=""
              /> </a
            ><a href="../sankey.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Sankey150.png"
                alt=""
              /> </a
            ><a href="../arc.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Arc150.png"
                alt=""
              /> </a
            ><a href="../bundle.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Bundle150.png"
                alt=""
              />
            </a>

            <a href="../intro_d3js.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Basic150_black.png"
                alt=""
              />
            </a>
            <a href="../interactivity.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/anim150.gif"
                alt=""
              />
            </a>
            <a href="../graph/shape.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Shapehelper150_black.png"
                alt=""
              />
            </a>
            <a href="https://www.data-to-viz.com/caveats">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Bad150.png"
                alt=""
              />
            </a>
            <a href="../custom.html">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/Colours150.png"
                alt=""
              />
            </a>
            <a href="https://www.data-to-art.com">
              <img
                class="img-fluid imageOfMenu"
                src="../img/section/DataArt1150.png"
                alt=""
              />
            </a>

            <span>X</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Research Bar Modal -->
<div
  class="modal fade"
  id="researchModal"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
  style="margin-right: 20px; margin-left: 20px"
>
  <div class="modal-dialog modal-dialog-centered" style="max-width: 1000px">
    <div class="modal-content" style="min-height: 400px">
      <div class="close-modal" data-dismiss="modal">
        <a href=""
          ><p
            style="
              color: #b8b8b8;
              padding-right: 15px;
              padding-top: 5px;
              text-align: right;
              font-size: 23px;
            "
          >
            &#10005;
          </p></a
        >
      </div>
      <div class="container">
        <div class="row">
          <div class="modal-body">
            <!-- Project Details Go Here -->
            <div style="margin-top: 120px; margin-bottom: 120px">
              <center>
                <input
                  id="stringToSearch"
                  type="text"
                  name="usrname"
                  value="d3.extent"
                  style="
                    outline: 0;
                    border-width: 0 0 2px;
                    border-color: #b35900 !important;
                  "
                />
                <button
                  id="researchSubmitButton"
                  class="btn btn-secondary btn-md text-uppercase"
                  type="button"
                >
                  Submit
                </button>
              </center>
            </div>
            <div id="resultSearch"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Data to viz poster Modal -->
<div
  class="modal fade"
  id="dataToVizPoster"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
  style="margin-right: 20px; margin-left: 20px"
>
  <div class="modal-dialog modal-dialog-centered" style="max-width: 1000px">
    <div class="modal-content" style="min-height: 400px">
      <div class="close-modal" data-dismiss="modal">
        <a href=""
          ><p
            style="
              color: #b8b8b8;
              padding-right: 15px;
              padding-top: 5px;
              text-align: right;
              font-size: 23px;
            "
          >
            &#10005;
          </p></a
        >
      </div>
      <div class="container">
        <div class="row">
          <div class="modal-body">
            <!-- Project Details Go Here -->
            <div style="margin-top: 120px; margin-bottom: 120px">
              <center>
                <div style="max-width: 600px; text-align: left">
                  <p>
                    The D3 Graph Gallery helps you build any chart with
                    Javascript.
                  </p>
                  <p>
                    However, choosing <b>the most appropriate chart type</b> for
                    your dataset can be challenging.
                  </p>
                  <p>
                    My project,
                    <a href="https://www.data-to-viz.com">Data To Viz</a>,
                    addresses this issue. It provides a
                    <b>decision tree</b> that guides you to the
                    <b>ideal chart</b> for your data.
                  </p>
                  <p>
                    If you're interested, I can send you a high-resolution
                    version of the poster directly to your inbox!
                  </p>
                </div>
                <div
                  style="
                    margin-top: -50px;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                  "
                >
                  <script
                    async
                    data-uid="d7241a121d"
                    src="https://prodigious-trailblazer-3628.ck.page/d7241a121d/index.js"
                  ></script>
                </div>
                <br />
                <div class="text-center">
                  <img
                    class="img-fluid"
                    src="../img/other/poster_small.png"
                    alt="High Resolution Poster"
                    style="max-width: 600px"
                  />
                </div>
              </center>
            </div>
            <div id="resultSearch"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="../js/d3.v4.js"></script>
<script>
  // A function that returns a list of interesting pages for the query
  function returnPages() {
    // get the text that must been searched
    var toSearch = d3.select("#stringToSearch").property("value");
    var address =
      "https://api.github.com/search/code?q=%22" +
      toSearch +
      "%22+path:graph+repo:holtzy/D3-graph-gallery";

    // Do the request to the gthub API
    d3.request(address)
      .mimeType("application/vnd.github.v3.text-match+json")
      .response(function (xhr) {
        var data = JSON.parse(xhr.responseText);

        // Div where I add the code
        div = d3.select("#resultSearch");

        // Erase the content of the div
        div.html("");

        // If no result, display a no result message
        if (data.items.length == 0) {
          div.html(
            "<center><p>😔<i>No result found, sorry...</i>😔</p></center>"
          );
        }

        // For each result item, add a section
        div
          .selectAll("resultItems")
          .data(data.items)
          .enter()
          .append("div")
          .html(function (d) {
            // Url to redirect to
            url = "https://www.d3-graph-gallery.com/graph/" + d.name;

            // Code selection: if 2 entries, keep only the second one.
            initialCode = d.text_matches[d.text_matches.length - 1].fragment;
            cleanCode = initialCode
              .replace("\n", "<br>")
              .replace("<li>", "")
              .replace(
                toSearch,
                "<span style='background-color: yellow'>" + toSearch + "</span>"
              );
            codeReady =
              "<p class='codeResearch'>....." + cleanCode + ".....</p>";
            return (
              "<br><br><a href=" +
              url +
              ">&rarr; " +
              d.name +
              "</a>" +
              "<br>" +
              codeReady
            );
          });
      })
      .get();
  }

  // When the submit button is triggered, run the function
  d3.select("#researchSubmitButton").on("click", returnPages);

  // If the 'Enter' key is pressed, trigger the function as well
  var input = document.getElementById("stringToSearch");
  input.addEventListener("keyup", function (event) {
    event.preventDefault();
    if (event.keyCode === 13) {
      document.getElementById("researchSubmitButton").click();
    }
  });
</script>
